<!--
  Generated template for the CeshiPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->


<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>form 2种验证方式</ion-title>
  </ion-navbar>
</ion-header>


<ion-content padding>



<!--传统的ng 提交的方法 把ng-model嵌入了html中-->
<form (ngSubmit)="logForm()">
            <ion-item>
                <ion-label>Todo</ion-label>
                <ion-input type="text" [(ngModel)]="todo.title" name="title"></ion-input>
            </ion-item>
            <ion-item>
                <ion-label>Description</ion-label>
                <ion-textarea [(ngModel)]="todo.description" name="description"></ion-textarea>
            </ion-item>
            <button ion-button type="submit" block>Add Todo</button>
        </form>

<div class="header-1">下面是ng2改善过的表单</div>

<!--wrong example    https://yanxiaodi.gitbooks.io/ionic2-guide/resources/forms.html-->
 <form [formGroup]="todo1" (ngSubmit)="logForm1()">
            <ion-item>
                <ion-label>Todo</ion-label>
                <ion-input type="text" formControlName="title"></ion-input>
            </ion-item>
            <ion-item>
                <ion-label>Description</ion-label>
                <ion-textarea formControlName="description"></ion-textarea>
            </ion-item>
            <button ion-button type="submit" [disabled]="unableSub()">Submit</button>
        </form>


</ion-content>
